<template>
  <view class="OnLineUserHead">
    <view class="user-info ">
      <view class="flex between item-center">
        <view class="flex f_1">
          <image :src="headInfo.photoUrl ? headInfo.photoUrl : photoUrl" class="img_bg" />
          <view class="user-account flex flex-column around f_1">
            <view class="nickname flex flex-row item-center">
              <text class="line-1">{{ headInfo.nickName || "--" }}</text>
              <label v-if="headInfo.isVip" class="fs_0">VIP</label>
            </view>
            <view>{{ headInfo.phone }}</view>
          </view>
        </view>
        <view class="score fs_0">
          <view>{{ headInfo.correctRate ? `${headInfo.correctRate}${headInfo.correctRate.indexOf('%') == -1 ? '%' : ''}`
            : 0 }}</view>
          <view>(平均正确率)</view>
        </view>
      </view>
    </view>
    <Navbar class="step-navbar" :tabList="tabList" :selectVal="selectVal" @updateVal="$emit('navbarClick', $event)">
    </Navbar>
    <view class="statistics">
      <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/user-bg.png" class="bg"></image>
      <view class="data flex">
        <view class="flex f_1 around">
          <view class="flex flex-column">
            <text>{{ headInfo.answerNum ? headInfo.answerNum : 0 }}</text>
            <label>答题数</label>
          </view>
          <view class="flex flex-column">
            <text>{{ headInfo.rate ? `${headInfo.rate}%` : 0 }}</text>
            <label>正确率</label>
          </view>
          <view class="flex flex-column" v-if="practiceType == '3'">
            <text>{{ headInfo.avgNum ? headInfo.avgNum : 0 }}</text>
            <label>用时</label>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Navbar from "@/improve/components/Navbar.vue";
import { mapState } from 'vuex';
import photoUrl from '@/static/images/smallTx.svg'
export default {
  name: "OnLineUserHead",
  components: { Navbar },
  props: {
    navList: Array,
    selectVal: String,
    headInfo: Object,
    practiceType: String
  },
  data() {
    return {
      photoUrl
    }
  },
  computed: {
    ...mapState(['loginData']),
    tabList() {
      return this.navList.map((item, index) => {
        return {
          text: this.practiceType == 2 ? `练测${index + 1}` : item.levelName,
          value: this.practiceType == 2 ? item : item.levelUuid
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.OnLineUserHead {
  .user-info {
    padding: 0 16px;
    margin-top: 16px;

    image {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 16px;
    }

    .user-account {
      color: #333333;
      font-size: 14px;

      .nickname {
        font-size: 16px;

        label {
          padding: 1px 5px;
          background-color: #EED682;
          color: #A86C12;
          font-size: 10px;
          margin-left: 9px;
          border-radius: 4px;
          height: fit-content;
        }
      }
    }

    .score {
      color: #333333;

      >view:nth-child(1) {
        font-size: 24px;
        color: #37B874;
        text-align: center;

        label {
          font-size: 12px;
        }
      }

      >view:nth-child(2) {
        font-size: 10px;
      }
    }
  }

  .step-navbar {
    height: 30px;
    display: flex;
    padding: 16px;
    padding-top: 30px;
  }

  .statistics {
    position: relative;
    color: #FFFFFF;
    font-size: 16px;
    height: 90px;
    width: 100%;

    .bg {
      width: 100%;
      height: 100%;
    }

    .data {
      position: absolute;
      top: 12px;
      left: 0;
      width: 100%;

      label {
        font-size: 12px;
        margin-top: 5px;
      }
    }
  }
}
</style>